<template>
  <div class="login-logo">
    <!--    <ding-dong-icon :icon="icon"></ding-dong-icon>-->
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import DingDongIcon from "./DingDongIcon.vue";
import {Icon} from "@/enums";

export default defineComponent({
  components: {
    // DingDongIcon,
  },
  data() {
    return {
      icon: Icon.ERJI,
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/assets/css/var.scss";
@import "@/assets/css/global.scss";

.login-logo {
  // 设置背景颜色为浅蓝色，使用变量 $color-blue-light
  background-color: $color-blue-shallow;
  // 计算高度为整个视窗高度减去头部和尾部的高度
  //height: calc(100vh - $header-height - $footer-height);
  height: 100%;
  // 设置最小宽度为 100% 视口宽度
  //min-width: 100vw;
  // 当内容超出时隐藏溢出
  overflow: hidden;
  // 使用自定义的 layout 混合指令，将内容居中对齐
  @include layout(center, center);
  .icon {
    // 使用自定义的 icon 混合指令，设置大小和颜色
    @include icon(36rem, $color-blue-dark);
    // 旋转图标 -30 度
    transform: rotate(-30deg);
  }
}

//// 屏幕宽度大于等于 $sm 时的媒体查询
//@media screen and (min-width: $sm) {
//  .login-logo {
//    // 设置宽度为 50% 视口宽度
//    width: 50vw;
//  }
//}
//
//// 屏幕宽度小于 $sm 时的媒体查询
//@media screen and (max-width: $sm) {
//  .login-logo {
//    // 设置宽度为 100% 视口宽度，适配小屏幕
//    width: 100vw;
//  }
//}
</style>
